<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>WebGL模型页面</title>
    <script type="text/javascript" src="jquery/jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/dat.gui.min.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/three.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/Detector.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/OrbitControls.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/VRMLLoader.js"></script>
    <script type="text/javascript" src="mintor/model/threeJs/stats.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .lbl {
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            position: absolute;
            z-index: 100;
            text-shadow: #000 1px 1px 1px;
            background-color: rgba(0, 0, 0, 0.85);
            padding: 1em
        }

        #lbl_tip {
            text-align: left;
        }

        .g {
            color: #aaa
        }

        .c {
            color: #fa0
        }


    </style>
</head>

<body>
<div id="lbl_tip" class="lbl" style="display: none;">
    <p2 id="sensorNum">传感器编号: <span class="c">001-SDT00-04</span><br/></p2>
    <p2 id="sensorValue">数值: <span class="c">28.5度</span><br/></p2>
</div>
<div id="info_tip" class="lbl" style="right:0;" >
    <p2 id="xpos">x轴坐标 ：<span class="c">0</span><br/></p2>
    <p2 id="ypos">y轴坐标 ：<span class="c">0</span><br/></p2>
    <p2 id="zpos">z轴坐标 ：<span class="c">0</span><br/></p2>
    <%--<p2 id="mapos">主轴坐标：<span class="c">0</span><br/></p2>--%>
    <p2 id="maspd">主轴速度：<span class="c">0</span><br/></p2>
</div>

<div id="Stats-output"></div>
<!-- Div which will hold the Output -->
<div id="WebGL-output"></div>

<script type="text/javascript">
    if (!Detector.webgl) Detector.addGetWebGLMessage();
    var controls,stats,container,scene,webGLRenderer,camera;
    var maxis,columnaxis,xaxismotion,yaxismotion,zaxismotion,totalMd,sensor,raycaster,mouse;
    var machineMotion;
    var pivot = undefined;
    var maxisGroup = undefined;
    var maxisBase={x:-1,y:1.5,z:0};                 // 主轴基准坐标
    var maxisDeviation={x:0,y:0,z:0};               // 主轴初始化后偏移
    var axisDeviation={x:0,y:0,z:0};                // 三轴初始化后偏移
    var maxisOrigin={x:0,y:0,z:0};      // 主轴原始坐标
    var runStatus = false,zdir=false,ydir=false;
    init();
    render();
    $(window).resize(function() {
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
    });

    function init(){
        stats = initStats();                                // 初始化帧数显示插件
        container = document.createElement('div');
        //把上面的层放到body里
        document.body.appendChild(container);
        // create a scene, that will hold all our elements such as objects, cameras and lights.
        scene = new THREE.Scene();
        webGLRenderer = new THREE.WebGLRenderer({antialias: false});      // 生成渲染对象并设置抗锯齿为有效
        webGLRenderer.setClearColor(0xaaaaff, 1.0);                            // 设置canvas背景色(clearColor)
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);     // 指定渲染的宽高
        webGLRenderer.shadowMapEnabled = true;
        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e10);
        camera.position.set(-8, 3, -0.2);
        scene.add(camera);
        controls = new THREE.OrbitControls(camera);                             // 利用当前摄像机建立鼠标控制
        var dirLight = new THREE.DirectionalLight(0xffffff);  //方向光
        dirLight.position.set(130, 150, 1000).normalize();
        camera.add(dirLight);
        camera.add(dirLight.target);

        var objLoader = new THREE.VRMLLoader();
        objLoader.load('mintor/model/model.wrl', function (geometry) {
            totalMd = geometry;
            sensor = geometry.children[0];
            xaxismotion = new Array(geometry.children[0].children[3]);                  // X轴运动块数组
            yaxismotion = new Array(geometry.children[0].children[3].children[5]);      // Y轴运动块数组
            zaxismotion = new Array(                                                    // Z轴运动块数组
                    geometry.children[0].children[3].children[5].children[2],
                    geometry.children[0].children[3].children[5].children[3],
                    geometry.children[0].children[3].children[5].children[4],
                    geometry.children[0].children[3].children[5].children[5],
                    geometry.children[0].children[3].children[5].children[6]
            );
            machineMotion = new Array(xaxismotion,yaxismotion,zaxismotion);             // 机床运动块数组
            maxis = geometry.children[0].children[3].children[5].children[6].children[7];
            geometry.position.set(0, 0, 0);
            scene.add(geometry);
            container.appendChild(webGLRenderer.domElement);
            maxisGroup = new THREE.Group();                                      // 新建物体组
            var box1 = new THREE.Box3().setFromObject(maxis);               // 边界框
            maxisGroup.add(maxis);                                                 // 将目标块加入组中
            box1.getCenter(maxis.position);                                    // 设置盒子中心
            maxis.position.multiplyScalar(-1);                                // 反方向移动
            box1.getCenter(maxisGroup.position);
            scene.add(maxisGroup);
            maxisOrigin.x=maxisGroup.position.x;                            // 获取主轴原始坐标
            maxisOrigin.y=maxisGroup.position.y;
            maxisOrigin.z=maxisGroup.position.z;
            maxisGroup.position.set(maxisBase.x,maxisBase.y,maxisBase.z);   // 把主轴放到基准坐标
            maxisDeviation.x=maxisBase.x-maxisOrigin.x;                     // 计算主轴偏移
            maxisDeviation.y=maxisBase.y-maxisOrigin.y;
            maxisDeviation.z=maxisBase.z-maxisOrigin.z;
            initAllAxisGroup();                                             // 把三轴的块移到基准零点
            container.addEventListener('mousemove', onMouseDownzaxis, false);
            container.addEventListener('mousedown', onMouseDownR, false);
        });
    }

    function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        $("#Stats-output").append(stats.domElement);
        return stats;
    }

    function onMouseDownzaxis(event) {
        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2();
        event.preventDefault();                                                    // 禁用事件的默认处理程序
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;                       // 计算鼠标坐标
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);                                   // 设置射线

        var intersects = raycaster.intersectObjects(sensor.children, true);
        var intersected;
        if (intersects.length > 0) {                                              // 是否拾取到物体
            intersected = intersects[0].object;
            if (intersected) {
                var throughBoxArray = intersects[0].object.matrixWorld.elements.toString();
                for (var i = 1; i < 91; i++) {
                    var zaxissensor = sensor.children[3].children[5].children[6].children[6].children[i];
                    if (throughBoxArray == zaxissensor.children[0].matrixWorld.elements.toString()) {
                        container.style.cursor = 'pointer';
                        zaxissensor.scale.set(3, 1.5, 2);
                        zaxissensor.children[0].children[0].material.color.set(0xff0000);
                        document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                        document.getElementById("lbl_tip").style.top = event.clientY + "px";
                        document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + zaxissensor.name + "</span><br/></p3>";
                        document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                        $('#lbl_tip').show();
                        break;
                    } else {
                        if (i < 31 && throughBoxArray == sensor.children[0].children[i].children[0].matrixWorld.elements.toString()) {
                            var xleftsensor = sensor.children[0].children[i];
                            container.style.cursor = 'pointer';
                            xleftsensor.scale.set(3, 1.5, 2);
                            xleftsensor.children[0].children[0].material.color.set(0xff0000);
                            document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                            document.getElementById("lbl_tip").style.top = event.clientY + "px";
                            document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + xleftsensor.name + "</span><br/></p3>";
                            document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                            $('#lbl_tip').show();
                            break;
                        } else if (i < 31) {
                            sensor.children[0].children[i].scale.set(1, 1, 1);
                            sensor.children[0].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }
                        if (i < 31 && throughBoxArray == sensor.children[1].children[i].children[0].matrixWorld.elements.toString()) {
                            var xrightsensor = sensor.children[1].children[i];
                            container.style.cursor = 'pointer';
                            xrightsensor.scale.set(3, 1.5, 2);
                            xrightsensor.children[0].children[0].material.color.set(0xff0000);
                            document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                            document.getElementById("lbl_tip").style.top = event.clientY + "px";
                            document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + xrightsensor.name + "</span><br/></p3>";
                            document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                            $('#lbl_tip').show();
                            break;
                        } else if (i < 31) {
                            sensor.children[1].children[i].scale.set(1, 1, 1);
                            sensor.children[1].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }
                        if (i < 25 && throughBoxArray == sensor.children[3].children[4].children[i].children[0].matrixWorld.elements.toString()) {
                            var coleftsensor = sensor.children[3].children[4].children[i];
                            container.style.cursor = 'pointer';
                            coleftsensor.scale.set(3, 1.5, 2);
                            coleftsensor.children[0].children[0].material.color.set(0xff0000);
                            document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                            document.getElementById("lbl_tip").style.top = event.clientY + "px";
                            document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + coleftsensor.name + "</span><br/></p3>";
                            document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                            $('#lbl_tip').show();
                            break;
                        } else if (i < 25) {
                            sensor.children[3].children[4].children[i].scale.set(1, 1, 1);
                            sensor.children[3].children[4].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }
                        if (i < 25 && throughBoxArray == sensor.children[3].children[3].children[i].children[0].matrixWorld.elements.toString()) {
                            var corightsensor = sensor.children[3].children[3].children[i];
                            container.style.cursor = 'pointer';
                            corightsensor.scale.set(3, 1.5, 2);
                            corightsensor.children[0].children[0].material.color.set(0xff0000);
                            document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                            document.getElementById("lbl_tip").style.top = event.clientY + "px";
                            document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + corightsensor.name + "</span><br/></p3>";
                            document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                            $('#lbl_tip').show();
                            break;
                        } else if (i < 25) {
                            sensor.children[3].children[3].children[i].scale.set(1, 1, 1);
                            sensor.children[3].children[3].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }
                        if (i < 21 && throughBoxArray == sensor.children[3].children[2].children[i].children[0].matrixWorld.elements.toString()) {
                            var yaxissensor = sensor.children[3].children[2].children[i];
                            container.style.cursor = 'pointer';
                            yaxissensor.scale.set(3, 1.5, 2);
                            yaxissensor.children[0].children[0].material.color.set(0xff0000);
                            document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                            document.getElementById("lbl_tip").style.top = event.clientY + "px";
                            document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + yaxissensor.name + "</span><br/></p3>";
                            document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                            $('#lbl_tip').show();
                            break;
                        } else if (i < 21) {
                            sensor.children[3].children[2].children[i].scale.set(1, 1, 1);
                            sensor.children[3].children[2].children[i].children[0].children[0].material.color.set(0x00ffff);
                        }
//                            if (i < 25 && throughBoxArray == sensor.children[3].children[5].children[6].children[7].children[i].children[0].matrixWorld.elements.toString()) {
//                                var maxissensor = sensor.children[3].children[5].children[6].children[7].children[i];
//                                container.style.cursor = 'pointer';
//                                maxissensor.scale.set(3, 1.5, 2);
//                                maxissensor.children[0].children[0].material.color.set(0xff0000);
//                                document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
//                                document.getElementById("lbl_tip").style.top = event.clientY + "px";
//                                document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + maxissensor.name + "</span><br/></p3>";
//                                document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
//                                $('#lbl_tip').show();
//                                break;
//                            } else if (i < 25) {
//                                sensor.children[3].children[5].children[6].children[7].children[i].scale.set(1, 1, 1);
//                                zaxis.children[7].children[i].children[0].children[0].material.color.set(0x00ffff);
//                            }
                        container.style.cursor = 'auto';
                        document.getElementById("lbl_tip").style.display = "none";
                        sensor.children[3].children[5].children[6].children[6].children[i].scale.set(1, 1, 1);
                        sensor.children[3].children[5].children[6].children[6].children[i].children[0].children[0].material.color.set(0x00ffff);
                    }
                }
            }
        } else {
            container.style.cursor = 'auto';
        }

        var intersectsm = raycaster.intersectObjects(maxis.children, true);
        var intersectedm;
        if (intersectsm.length > 0) {                                              // 是否拾取到物体
            intersectedm = intersectsm[0].object;
            if (intersectedm) {
                var throughBoxArraym = intersectsm[0].object.matrixWorld.elements.toString();
                for (var i = 1; i < 25; i++) {
                    if (throughBoxArraym == maxis.children[i].children[0].matrixWorld.elements.toString()) {
                        var maxissensor = maxis.children[i];
                        container.style.cursor = 'pointer';
                        maxissensor.scale.set(3, 1.5, 2);
                        maxissensor.children[0].children[0].material.color.set(0xff0000);
                        document.getElementById("lbl_tip").style.left = event.clientX + 10 + "px";
                        document.getElementById("lbl_tip").style.top = event.clientY + "px";
                        document.getElementById("sensorNum").innerHTML = "<p3 id='sensorNum'>传感器编号: <span class='c'>001-SDT00-" + maxissensor.name + "</span><br/></p3>";
                        document.getElementById("sensorValue").innerHTML = "<p3 id='sensorValue'>数值: <span class='c'> " + i + "度</span><br/></p3>";
                        $('#lbl_tip').show();
                        break;
                    } else {
                        maxis.children[i].scale.set(1, 1, 1);
                        maxis.children[i].children[0].children[0].material.color.set(0x00ffff);
                    }
                }
            }
        }
    }

    function render() {
        stats.update();
        if(runStatus==true){
            if (maxisGroup != undefined) {
                maxisGroup.rotateY(0.1);                                // 主轴旋转动作
            }
            if(xaxismotion!=undefined) {
                moveGroupPositionX(machineMotion[0]);                  // 移动x轴块
                moveGroupPositionY(machineMotion[1]);                  // 移动y轴块
                moveGroupPositionZ(machineMotion[2]);                  // 移动z轴块
            }
            infoShowChange();
        }
        requestAnimationFrame(render);
        controls.update();
        webGLRenderer.render(scene, camera);
    }

    function onMouseDownR(event){
        if(event.button==1){                        // 滚轮键
            runStatus = !runStatus;
        }
        if(event.button==0){                        // 左键
            ydir=!ydir;
        }
        if(event.button==2){                        // 右键
            zdir=!zdir;
        }
    };
    function moveGroupPositionX(tempGroup) {
        for(var iTem in tempGroup){
            tempGroup[iTem].position.x-=0.001;                           // 表示x轴运动
        }
        maxisGroup.position.x-=0.001;                                    // 主轴x方向跟随x轴运动
    }
    function moveGroupPositionY(tempGroup) {
        for(var iTem in tempGroup){
            tempGroup[iTem].position.z+=0.001*(ydir==false?-1:1);       // 表示y轴运动
        }
        maxisGroup.position.z+=0.001*(ydir==false?-1:1);                // 主轴y方向跟随y轴运动
    }
    function moveGroupPositionZ(tempGroup) {
        for(var iTem in tempGroup){
            tempGroup[iTem].position.y+=0.001*(zdir==false?-1:1);        // 表示z轴运动
        }
        maxisGroup.position.y+=0.001*(zdir==false?-1:1);                 // 主轴z方向跟随z轴运动
    }

    function initAxisGrouptoPosition(tempGroup,taxis,pos) {
        for(var iTem in tempGroup){
            switch(taxis){
                case 0:tempGroup[iTem].position.x=pos; break;           // x轴移动到目的位置
                case 1:tempGroup[iTem].position.z=pos; break;           // y轴移动到目的位置
                case 2:tempGroup[iTem].position.y=pos; break;           // z轴移动到目的位置
                default:break;
            }
        }
//            switch(taxis){
//                case 0:maxisGroup.position.x=pos*(-1.0); break;              // 主轴x方向移动到目的位置
//                case 1:maxisGroup.position.z=pos; break;                     // 主轴y方向移动到目的位置
//                case 2:maxisGroup.position.y=pos; break;                     // 主轴z方向移动到目的位置
//                default:break;
//            }
    }

    function initAllAxisGroup() {
        axisDeviation.x=machineMotion[0][0].position.x+(maxisDeviation.x);     // 计算三轴初始化后偏移
        axisDeviation.y=machineMotion[2][0].position.y+(maxisDeviation.y);
        axisDeviation.z=machineMotion[1][0].position.z+(maxisDeviation.z);
        initAxisGrouptoPosition(machineMotion[0],0,axisDeviation.x);
        initAxisGrouptoPosition(machineMotion[1],1,axisDeviation.z);
        initAxisGrouptoPosition(machineMotion[2],2,axisDeviation.y);
    }

    function infoShowChange() {
        var xpos = (maxisGroup.position.x-maxisBase.x) * -1.0;
        var ypos = (maxisGroup.position.z-maxisBase.z) * -1.0;
        var zpos = (maxisGroup.position.y-maxisBase.y) * 1.0;
        var maspd = maxisGroup.rotation.y * -1.0;

        document.getElementById("xpos").innerHTML = "<p3 id='xpos'>x轴坐标 ：<span class='c'>" + xpos.toFixed(3) + "</span><br/></p3>";
        document.getElementById("ypos").innerHTML = "<p3 id='ypos'>y轴坐标 ：<span class='c'>" + ypos.toFixed(3) + "</span><br/></p3>";
        document.getElementById("zpos").innerHTML = "<p3 id='zpos'>z轴坐标 ：<span class='c'>" + zpos.toFixed(3) + "</span><br/></p3>";
        document.getElementById("maspd").innerHTML = "<p3 id='maspd'>主轴速度：<span class='c'>" + maspd.toFixed(3) + "</span><br/></p3>";
    }

</script>

</body>
</html>